<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 */
			.contain{
				width: 200px;
				background-color: antiquewhite;
				display: flex;
			}
			/* 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
			如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
			
			负值对该属性无效。 */
		</style>
	</head>
	<body>
		<div class="contain">
		<div style="width: 100px; height: 100px; background-color: #6495ED;">1</div>
		<div style="width: 100px; height: 200px; background-color: #ADFF2F;flex-shrink: 1;">2</div>
		<div style="width: 100px; height: 300px;background-color: #B8860B;flex-shrink: 1;">3</div>
		<div style="width: 100px; height: 400px; background-color: #FFF0F5;flex-shrink: 1;">4</div>
		</div>
	</body>
</html>
